<template>
    <div class="rescue-container">
      <!-- 物资储备卡片 -->
      <el-card class="rescue-card">
        <div slot="header" class="card-header">
          <span class="title">周边物资储备</span>
          <el-tag type="success">历史数据</el-tag>
        </div>
        
        <div class="card-content">
          <el-table
            :data="materialData"
            style="width: 100%"
            height="300"
            v-loading="loading"
          >
            <el-table-column prop="departName" label="单位名称" width="150" />
            <el-table-column prop="name" label="物资名称" width="100"></el-table-column>
            <el-table-column prop="count" label="数量"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="{row}">
                <el-button 
                  type="text" 
                  size="small"
                  @click="showMaterialLocation(row)">查看位置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
  
      <!-- 救援能力卡片 -->
      <el-card class="rescue-card">
        <div slot="header" class="card-header">
          <span class="title">救援队伍能力</span>
          <el-tag type="warning">实时更新</el-tag>
        </div>
        
        <div class="card-content">
          <div class="rescue-teams">
            <div 
              v-for="team in rescueTeams" 
              :key="team.id"
              class="team-card"
            >
              <div class="team-header">
                <h4>{{ team.name }}</h4>
                <el-tag :type="getTeamStatusTag(team.status)">
                  {{ team.status }}
                </el-tag>
              </div>
              <div class="team-stats">
                <div class="stat-item">
                  <i class="el-icon-user"></i>
                  <span>{{ team.members }}人</span>
                </div>
                <div class="stat-item">
                  <i class="el-icon-truck"></i>
                  <span>{{ team.vehicles }}辆</span>
                </div>
                <div class="stat-item">
                  <i class="el-icon-time"></i>
                  <span>{{ team.responseTime }}分钟</span>
                </div>
              </div>
              <div class="team-actions">
                <el-button 
                  type="primary" 
                  size="mini"
                  @click="dispatchTeam(team.id)"
                  :disabled="team.status !== '待命'"
                >
                  派遣
                </el-button>
                <el-button 
                  type="text" 
                  size="mini"
                  @click="showTeamDetail(team.id)"
                >
                  详情
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-card>
  
      <!-- 救援路线卡片 -->
      <el-card class="rescue-card">
        <div slot="header" class="card-header">
          <span class="title">救援路线规划</span>
          <el-button-group>
            <el-button 
              size="mini" 
              @click="changeRouteType('fastest')"
              :type="routeType === 'fastest' ? 'primary' : ''"
            >
              最快路线
            </el-button>
            <el-button 
              size="mini" 
              @click="changeRouteType('safest')"
              :type="routeType === 'safest' ? 'primary' : ''"
            >
              最安全路线
            </el-button>
            <el-button 
              size="mini" 
              @click="changeRouteType('shortest')"
              :type="routeType === 'shortest' ? 'primary' : ''"
            >
              最短路线
            </el-button>
          </el-button-group>
        </div>
        
        <div class="card-content">
          <div class="route-map-container">
            <!-- 这里放置地图组件，实际项目中可以使用百度地图、高德地图或Leaflet等 -->
            <div class="mock-map">
              <div class="map-legend">
                <div class="legend-item">
                  <div class="color-block fastest" v-if="routeType === 'fastest'"></div>
                  <div class="color-block safest" v-else-if="routeType === 'safest'"></div>
                  <div class="color-block shortest" v-else></div>
                  <span>{{ routeDisplayText }}</span>
                </div>
                <div class="legend-item">
                  <div class="color-block disaster"></div>
                  <span>灾害区域</span>
                </div>
                <div class="legend-item">
                  <div class="color-block material"></div>
                  <span>物资点</span>
                </div>
              </div>
              <div class="map-content">
                <div class="disaster-area"></div>
                <div 
                  v-for="point in materialPoints" 
                  :key="point.id"
                  class="material-point"
                  :style="{left: point.x + '%', top: point.y + '%'}"
                ></div>
                <div class="route-line" :class="routeType"></div>
              </div>
            </div>
          </div>
          
          <div class="route-info">
            <div class="info-item">
              <label>路线长度:</label>
              <span>{{ routeInfo.distance }}公里</span>
            </div>
            <div class="info-item">
              <label>预计时间:</label>
              <span>{{ routeInfo.time }}分钟</span>
            </div>
            <div class="info-item">
              <label>途经点:</label>
              <span>{{ routeInfo.points.join(' → ') }}</span>
            </div>
          </div>
        </div>
      </el-card>
  
      <!-- 物资位置详情对话框 -->
      <el-dialog
        title="物资储备位置详情"
        :visible.sync="materialDialogVisible"
        width="50%"
      >
        <material-detail :material="selectedMaterial" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="materialDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="navigateToMaterial">导航</el-button>
        </span>
      </el-dialog>
  
      <!-- 救援队伍详情对话框 -->
      <el-dialog
        title="救援队伍详情"
        :visible.sync="teamDialogVisible"
        width="60%"
      >
        <team-detail :team="selectedTeam" />
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import { Card, Table, TableColumn, Tag, Progress, Button, ButtonGroup, Dialog } from 'element-ui';
  import MaterialDetail from '@/views/app/components/MaterialDetail.vue';
  import TeamDetail from '@/views/app/components/TeamDetail.vue';
  
  interface Material {
    id: string;
    name: string;
    departName: string;
    count: number;
    position: string;
  }
  
  interface RescueTeam {
    id: string;
    name: string;
    members: number;
    vehicles: number;
    responseTime: number;
    status: '待命' | '任务中' | '休整';
    speciality: string[];
    location: string;
  }
  
  interface RouteInfo {
    distance: number;
    time: number;
    points: string[];
  }
  
  @Component({
    components: {
      ElCard: Card,
      ElTable: Table,
      ElTableColumn: TableColumn,
      ElTag: Tag,
      ElProgress: Progress,
      ElButton: Button,
      ElButtonGroup: ButtonGroup,
      ElDialog: Dialog,
      MaterialDetail,
      TeamDetail
    }
  })
  export default class RescueInfoPanel extends Vue {
    private loading = false;
    private routeType: 'fastest' | 'safest' | 'shortest' = 'fastest';
    private materialDialogVisible = false;
    private teamDialogVisible = false;
    private selectedMaterial: Material | null = null;
    private selectedTeam: RescueTeam | null = null;
  
    // 物资数据
    materialData;
  
    // 救援队伍数据
    private rescueTeams: RescueTeam[] = [
      { id: 't1', name: '蓝天救援队', members: 25, vehicles: 8, responseTime: 15, status: '待命', speciality: ['水上救援', '医疗急救'], location: '救援基地A' },
      { id: 't2', name: '武警救援队', members: 50, vehicles: 15, responseTime: 10, status: '任务中', speciality: ['重型救援', '快速响应'], location: '武警驻地' },
      { id: 't3', name: '医疗救援队', members: 18, vehicles: 5, responseTime: 20, status: '待命', speciality: ['医疗救护', '伤员转运'], location: '中心医院' },
      { id: 't4', name: '民间志愿队', members: 30, vehicles: 10, responseTime: 25, status: '休整', speciality: ['物资分发', '群众疏散'], location: '社区中心' }
    ];
  
    // 物资点坐标（模拟地图位置）
    private materialPoints = [
      { id: 'p1', x: 20, y: 30 },
      { id: 'p2', x: 50, y: 40 },
      { id: 'p3', x: 70, y: 20 },
      { id: 'p4', x: 30, y: 70 },
      { id: 'p5', x: 60, y: 60 }
    ];
  
    // 路线信息
    private routeInfo: RouteInfo = {
      distance: 12.5,
      time: 28,
      points: ['救援基地A', '东区仓库', '中心医院', '灾害区域']
    };
  
    // 计算属性
    get routeDisplayText(): string {
      switch (this.routeType) {
        case 'fastest': return '最快路线 (预计28分钟)';
        case 'safest': return '最安全路线 (避开危险区域)';
        case 'shortest': return '最短路线 (12.5公里)';
        default: return '';
      }
    }
  
    // 方法
    private getMaterialTypeTag(type: string): string {
      const typeMap: Record<string, string> = {
        '救援设备': 'primary',
        '防洪物资': 'success',
        '生活物资': 'warning',
        '医疗物资': 'danger',
        '电力设备': 'info'
      };
      return typeMap[type] || '';
    }
  
    private getStockColor(stock: number, maxStock: number): string {
      const ratio = stock / maxStock;
      if (ratio < 0.3) return '#f56c6c';
      if (ratio < 0.6) return '#e6a23c';
      return '#67c23a';
    }
  
    private getTeamStatusTag(status: string): string {
      const statusMap: Record<string, string> = {
        '待命': 'success',
        '任务中': 'warning',
        '休整': 'info'
      };
      return statusMap[status] || '';
    }
  
    private showMaterialLocation(material: Material): void {
      this.selectedMaterial = material;

   
    }
  
    private showTeamDetail(teamId: string): void {
      this.selectedTeam = this.rescueTeams.find(t => t.id === teamId) || null;
      this.teamDialogVisible = true;
    }
  
    private dispatchTeam(teamId: string): void {
      const team = this.rescueTeams.find(t => t.id === teamId);
      if (team) {
        this.$confirm(`确定要派遣 ${team.name} 前往灾区吗?`, '确认派遣', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          team.status = '任务中';
          this.$message.success(`已成功派遣 ${team.name}`);
        }).catch(() => {
          this.$message.info('已取消派遣');
        });
      }
    }
  
    private changeRouteType(type: 'fastest' | 'safest' | 'shortest'): void {
      this.routeType = type;
      // 实际项目中这里应该调用API获取新的路线数据
      this.updateRouteInfo();
    }
  
    private updateRouteInfo(): void {
      // 模拟根据路线类型获取不同的路线信息
      if (this.routeType === 'fastest') {
        this.routeInfo = {
          distance: 12.5,
          time: 28,
          points: ['救援基地A', '东区仓库', '中心医院', '灾害区域']
        };
      } else if (this.routeType === 'safest') {
        this.routeInfo = {
          distance: 15.2,
          time: 35,
          points: ['救援基地A', '南区仓库', '医疗中心', '灾害区域']
        };
      } else {
        this.routeInfo = {
          distance: 10.8,
          time: 32,
          points: ['救援基地A', '中心仓库', '灾害区域']
        };
      }
    }
  
    private navigateToMaterial(): void {
      if (this.selectedMaterial) {
        this.$message.success(`正在导航到 ${this.selectedMaterial}`);
        this.materialDialogVisible = false;
        // 实际项目中这里应该调用地图API进行导航
      }
    }

    mounted(){
      (this as any).$bus.$on("regionsMaterialData", materialData =>{
        this.materialData = materialData;

      });
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .rescue-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  
  .rescue-card {
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  
      .title {
        font-size: 16px;
        font-weight: bold;
      }
    }
  
    .card-content {
      padding: 10px 0;
    }
  }
  
  .rescue-teams {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .team-card {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 15px;
    transition: all 0.3s;
  
    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  
    .team-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
  
      h4 {
        margin: 0;
        font-size: 14px;
      }
    }
  
    .team-stats {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
  
      .stat-item {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #606266;
  
        i {
          margin-right: 5px;
        }
      }
    }
  
    .team-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }
  
  .route-map-container {
    height: 300px;
    margin-bottom: 15px;
    position: relative;
  }
  
  .mock-map {
    width: 100%;
    height: 100%;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  
    .map-legend {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(255, 255, 255, 0.8);
      padding: 5px 10px;
      border-radius: 4px;
      z-index: 10;
  
      .legend-item {
        display: flex;
        align-items: center;
        margin: 3px 0;
        font-size: 12px;
  
        .color-block {
          width: 12px;
          height: 12px;
          margin-right: 5px;
          border-radius: 2px;
  
          &.fastest {
            background-color: #409eff;
          }
          &.safest {
            background-color: #67c23a;
          }
          &.shortest {
            background-color: #e6a23c;
          }
          &.disaster {
            background-color: #f56c6c;
          }
          &.material {
            background-color: #909399;
          }
        }
      }
    }
  
    .map-content {
      width: 100%;
      height: 100%;
      position: relative;
  
      .disaster-area {
        position: absolute;
        width: 30%;
        height: 40%;
        bottom: 10%;
        right: 10%;
        background-color: rgba(245, 108, 108, 0.3);
        border: 2px dashed #f56c6c;
        border-radius: 50%;
      }
  
      .material-point {
        position: absolute;
        width: 8px;
        height: 8px;
        background-color: #909399;
        border-radius: 50%;
        transform: translate(-50%, -50%);
  
        &::after {
          content: '';
          position: absolute;
          width: 16px;
          height: 16px;
          top: -4px;
          left: -4px;
          border-radius: 50%;
          background-color: rgba(144, 147, 153, 0.3);
        }
      }
  
      .route-line {
        position: absolute;
        height: 3px;
        background-color: #409eff;
        transform-origin: left center;
        transform: rotate(0deg);
        left: 10%;
        top: 20%;
        width: 30%;
  
        &.fastest {
          background-color: #409eff;
        }
        &.safest {
          background-color: #67c23a;
        }
        &.shortest {
          background-color: #e6a23c;
        }
  
        &::before {
          content: '';
          position: absolute;
          width: 10px;
          height: 10px;
          background-color: inherit;
          border-radius: 50%;
          right: -5px;
          top: -3.5px;
        }
      }
    }
  }
  
  .route-info {
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
  
    .info-item {
      display: flex;
      margin: 8px 0;
      font-size: 14px;
  
      label {
        font-weight: bold;
        margin-right: 10px;
        color: #606266;
        min-width: 70px;
      }
  
      span {
        color: #303133;
      }
    }
  }
  
  .stock-text {
    margin-left: 10px;
    font-size: 12px;
    color: #606266;
  }
  </style>